﻿@* 
    We can't use the FluentIcon's own Slot parameter here because it will not be detected by FluentMenu's internal script to determine 
    indentation (they are added too late in the render process). Workaround is to define a slot manually and place the FluentIcon in there
*@
<FluentSwitch @bind-Value="@open">Show</FluentSwitch>
<FluentMenu @bind-Open="@open">
    <FluentMenuItem>
        Menu item 1
        <span slot="start" >
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" />
        </span>
        <span slot="end">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" />
        </span>
    </FluentMenuItem>
    <FluentMenuItem>
        Menu item 2
        <span slot="start">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" />
        </span>
        <span slot="end">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" />
        </span>
    </FluentMenuItem>
    <FluentMenuItem>
        Menu item 3
        <span slot="start">
            <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Color="@Color.Accent" />
        </span>
        <span slot="end">
            <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Color="@Color.Accent" />
        </span>
    </FluentMenuItem>
</FluentMenu>

@code {
    bool open = false;
}
